<template>
    <div class="Box">
        <span v-for="(item, index) in props.list" :key="item" :style="isSel(index)" @click="selIndex = index">
            {{ item }}
        </span>
    </div> 
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'

interface Props{
    list:Array<string>
}
let selIndex = ref<number>(0)
const props = defineProps<Props>()
const isSel = computed(() => (index:number) => {
    if (selIndex.value === index)
    return 'background:#4a69bd;color:white'
})
</script>

<style lang="scss" scoped>
.Box{
    height: 35px;
    border-radius: 30px;
    box-sizing: border-box;
    background: #f1f2f3;
    @include flexRowCenter;
    & span{
        width: 70px;
        height: 100%;
        border-radius: 30px;
        @include flexRowCenter;
        cursor: pointer;
    }
}

</style>